@mixin borderBase {
	position: absolute;
	box-sizing: border-box;
	content: ' ';
	pointer-events: none;
}

@mixin border($color: var(--uwo-border-color, #e7e7e7)) {
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	border: 1px solid $color;
	transform: scale(0.5);
	@include borderBase();
}

@mixin borderTop($color: var(--uwo-border-color, #e7e7e7)) {
	right: 0;
	left: 0;
	top: 0;
	border-top: 1px solid $color;
	transform: scaleY(0.5);
	@include borderBase();
}

@mixin borderBottom($color: var(--uwo-border-color, #e7e7e7)) {
	right: 0;
	left: 0;
	bottom: 0;
	border-bottom: 1px solid $color;
	transform: scaleY(0.5);
	@include borderBase();
}

@mixin borderLeft($color: var(--uwo-border-color, #e7e7e7)) {
	top: 0;
	bottom: 0;
	left: 0;
	border-left: 1px solid $color;
	transform: scaleX(0.5);
	@include borderBase();
}

@mixin borderRight($color: var(--uwo-border-color, #e7e7e7)) {
	top: 0;
	bottom: 0;
	right: 0;
	border-right: 1px solid $color;
	transform: scaleX(0.5);
	@include borderBase();
}
